<template>
  <view class="container">
    <view class="back"></view>
    <view
    :style="{
      height: statusHeight+'px'
    }"
    style="background-color: #f5f5f5;position: fixed;top:0;width: 100%;z-index:999;left:0;"
    >
    </view>
    <view
    :style="{
      height: statusHeight+'px'
    }"
    ></view>

    <view
        class="box" >
      <clock-card
      @clock="$refs.clockRecordCard.searchBySelf()"
      ></clock-card>
    </view>

    <view style="height: 30rpx"></view>

    <!-- 打卡记录 -->
    <view class="box">
      <view class="title">
        <text>Clock Record</text>
      </view>
      <clock-record-card
      ref="clockRecordCard"
      ></clock-record-card>
    </view>

    <view style="height: 130rpx"></view>



  </view>
</template>

<script>
import ClockCard from "../components/ClockCard.vue";
import ClockRecordCard from "../components/ClockRecordCard.vue"

export default {
  components: {
    ClockCard,
    ClockRecordCard
  },
  data() {
    return {
      statusHeight:0
    }
  },
  mounted() {
    this.getStatusHeight();
  },
  methods: {
    // 获取状态栏高度
    getStatusHeight(){
      // uniapp获取状态栏高度
      this.statusHeight = uni.getSystemInfoSync().statusBarHeight;
    },

  }
}
</script>

<style lang="scss" scoped>

.container {
  box-sizing: border-box;
  padding: 20rpx;

}

.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  top: 0;
  left: 0;
  z-index: -1;
}


.box {
  padding: 20rpx ;
  background-color: #FFFFFF;
  border-radius: 30rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

}

.btn{
  padding: 20rpx;
  box-sizing: border-box;
}

.btn1:active{
  opacity: 0.5;
}

</style>